﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="css/ColorStyle.css" rel="stylesheet" />

    <!--https://code.jquery.com/jquery-1.11.2.js-->
    <!--<script src="https://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>-->
    <script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <script src="js/hexcode.js" type="text/javascript"></script>
    <script src="js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="content">
        <div id="menu" clas="menu">
            <div id="bg"></div>
            <div id="logo">
                <img src="" />
            </div>
        </div>
        <div id="text-container">
            <div style="z-index: 2;background-color: white">
                <div class="left">
                    <div id="color-review"></div>
                </div>
                <div class="right">
                    <label id="lblcode" class="text">#FFFFFF</label><br />
                    <label id="lbltest" class="text">CLICK TO COPY</label>
                </div>
            </div>
            <div id="lock-container">
                <div id="lock-bg"></div>
                <div id="lock-logo">
                </div>
            </div>
        </div>
        <div style="display: inline-table" id="color-container">
        </div>
    </div>
    <script type="text/javascript">
        //khai báo biến color:
        var colorX = undefined;
        

        var container = $('#color-container');

        var hexlen = hexcode.length;
        for (var i = 0; i < hexlen; i++) {
            var $elem = $("<div class='color' />").css('background-color', hexcode[i]);
            container.append($elem);
        }

        $('div.color', '#color-container').hover(function () {
            if (colorX.isDrag) {
                $('#lbltest').css('color', $(this).css('background-color'));
            }
        });

        $('.color', '#color-container').click(function () {
            var ihexcode = rgb2hex($(this).css('background-color'));

            $('.color').removeClass('select');
            $('#color-review').css('background-color', $(this).css('background-color'));
            $('#lblcode').text(ihexcode.toUpperCase());
            $('#lbltest').css('color', ihexcode);
            $(this).addClass('select');

            var nAgt = navigator.userAgent;
            // In Opera, the true version is after "Opera" or after "Version"
            if ((nAgt.indexOf("Opera")) != -1) {
                //alert("copy to ClipBoard is only in IE");
            }
                // In Chrome, the true version is after "Chrome"
            else if ((nAgt.indexOf("Chrome")) != -1) {
                //alert("copy to ClipBoard is only in IE");
            }
                // In Safari, the true version is after "Safari" or after "Version"
            else if ((nAgt.indexOf("Safari")) != -1) {
                //alert("copy to ClipBoard is only in IE");
            }
                // In Firefox, the true version is after "Firefox"
            else if ((nAgt.indexOf("Firefox")) != -1) {
                //alert("copy to ClipBoard is only in IE");
            }
            else {
                //IE
                window.clipboardData.setData('Text', ihexcode);
            }
        });

        //Function to convert hex format to a rgb color
        function rgb2hex(rgb) {
            rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
            return "#" +
             ("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) +
             ("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) +
             ("0" + parseInt(rgb[3], 10).toString(16)).slice(-2);
        }

        //function RGB2Color(r, g, b) {
        //    return '#' + this.byte2Hex(r) + this.byte2Hex(g) + this.byte2Hex(b);
        //}

        $(function () {
            colorX = new ColorClass();

            document.title = "Change Color";
            $("#text-container").draggable({ scroll: false });
        });

        $(this).mousemove(function (e) {
            if (colorX.isDrag) {
                var $item = $("#text-container");
                $item.css({ top: e.pageY, left: e.pageX });
            }
        });

        $(this).keyup(function (e) {
            if (e.keyCode == 27) {
                colorX.isDrag = colorX.isDrag ? false : true;
                $("#text-container").draggable({ disabled: true });
                $('#lock-container').fadeToggle(200);
            } else {
                e.preventDefault();
            }
        });

        // Định nghĩa class Color
        var ColorClass = function () {
            this.isDrag = true;
        };

    </script>
</body>
</html>